
import { Component, createRef } from 'react';

class Uncontrolled extends Component {
  constructor(){
    super();
    this.uname = createRef();
  }
  submit = (evt) => {
    // 阻止事件默认行为
    evt.preventDefault();
    const form = evt.target ; // 获得表单对象
    // 根据 表单中 组件的 name 属性值可以直接获取相应的组件
    const input = form.username;
    // 对于 input 、textarea 、select 来说通过 value 属性获取取值
    console.log( input.value );
  }
  getUsername = (evt) => {
    // 通过 ref 来获取指定 表单组件 的值
    console.log( this.uname.current.value ); 
  }
  render(){
    return (
      <div className="hello">
        {/* 监听表单的提交事件 */}
        <form onSubmit={ this.submit }>
            <div className="form-item">
                <span>用户名:</span>
                <input type="text" name="username"/>
            </div>
            <div className="form-buttons">
                <button>提交</button>
            </div>
        </form>

        <form>
            <div className="form-item">
                <span>用户名:</span>
                {/* 通过 ref 属性为元素设置 引用  */}
                <input type="text" name="username" ref={ this.uname }/>
            </div>
            <div className="form-buttons">
                {/* 监听按钮点击事件 */}
                <button type="button" onClick={ this.getUsername }>获取</button>
            </div>
        </form>
      </div>
    )
  }
}

export default Uncontrolled;